<style>
    .panel {
        width: 1240px;
        margin: auto;
    }

    .title {
        display: flex;
        padding-top: 4px;
        align-items: center;
        margin-bottom: 30px;
    }

    .settypes label {
        margin-right: 15px;
    }

    .tags2 a, .tags2 a:hover {
        padding: 2px 30px;
        border: 1px solid #4e73df;
        margin-top: 20px;
        display: inline-block;
    }

    .content table {
        border: 1px solid #bfbfbf;
        border-collapse: collapse
    }

    .content table td {
        border: 1px solid #bfbfbf;
        padding: 10px 20px;
    }

    .others {
        padding: 20px;
        box-shadow: 0 2px 8px 0 rgba(31, 50, 98, 0.13);
        border-radius: 3px;
        border: 1px solid #e1eaf7;
        padding-bottom: 60px;
    }

    .content button {
        /*padding: 5px 40px;*/
        /*margin: 10px;*/
    }

    .content .layer-footer {
        text-align: center;
        margin-top: 20px;
    }

    .content-previewsend {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
    }

    .phone-preview {
        display: flex;
        justify-content: flex-end;
    }

    .preview-set {
        width: 50%;
        margin-left: 40px;
        margin-top: -10px;
        height: 100%;
    }

    .contents-preview {
        width: 266px;
        overflow: hidden;
        box-shadow: 0 8px 18px 0 rgba(104, 113, 168, 0.28);
        border-radius: 8px;
        border: 1px solid #ebebeb;
    }

    .contents-preview .preview_head {
        display: flex;
        width: 100%;
        margin-top: 14px;
        margin-bottom: 16px;
        align-items: center;
        justify-content: center;
    }

    .contents-preview .title {
        text-align: center;
        font-size: 12px;
        font-weight: 400;
        color: #2a2d3f;
        line-height: 17px;
        margin-bottom: 0;
    }

    .preview_title {
        width: 246px;
        height: 128px;
        margin: 10px;
        background-size: 100% 100%;
        background-image: url(__CDN__/assets/addons/kupay/img/info1.png);
        border-radius: 8px;
        justify-content: center;
    }

    .preview_title .tip1 {
        height: 17px;
        font-size: 12px;
        font-weight: 400;
        color: #fff;
        line-height: 17px;
        text-align: center;
        padding-top: 20px;
    }

    .preview_title .tip2 {
        height: 28px;
        font-size: 20px;
        font-weight: 500;
        color: #fff;
        line-height: 28px;
        text-align: center;
        margin-top: 20px;
    }

    .preview_title .tip3 {
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        font-size: 12px;
        font-weight: 400;
        text-align: center;
        margin-top: 10px;
        margin-left: 20px;
        margin-right: 20px;
        color: #f2f3fc;
        margin-bottom: 10px;
    }

    .preview_body {
        overflow-y: auto;
        height: 312px;
    }

    .preview_body .company-info-item1 {
        align-items: center;
        display: flex;
        margin-bottom: 10px;
    }

    .preview_body .tip {
        width: 3px;
        height: 10px;
        background: #1a96ff;
        border-radius: 2px;
        margin-left: 14px;
    }

    .preview_body .tip4, .preview_body .tip_lable {
        height: 17px;
        font-size: 12px;
        color: #030303;
    }

    .preview_body .tip_lable {
        margin-left: 6px;
        font-weight: 500;
    }

    .content-previewsend .company-info-item2 .tip_lable {
        border-radius: 6px;
        margin-left: 6px;
    }

    .content-previewsend .company-info-item2 .tip {
        width: 4px;
        height: 15px;
        background: #1a96ff;
        border-radius: 2px;
    }

    .content-previewsend .company-info-item .tip {
        width: 4px;
        height: 15px;
        background: #1a96ff;
        border-radius: 2px;
    }

    .content-previewsend .company-info-item .tip_lable {
        border-radius: 6px;
        margin-left: 6px;
    }

    .devider {
        margin-top: 16px;
        height: 1px;
        background: #e8eaea;
        border: 1px #e8eaea;
    }

    .title {
        margin-top: 22px;
        text-align: center;
        height: 20px;
        font-size: 16px;
        font-weight: 600;
        color: #333;
        line-height: 20px;
    }

    .dialog-body {
        width: 94%;
        height: auto;
        background: #f4f6ff;
        border-radius: 4px;
        margin: 30px auto 0;
        display: flex;
        box-sizing: border-box;
        justify-content: flex-start;
        padding-top: 20px;
    }

    .dialog-body .wx-img {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        padding-top: 29px;
    }

    .dialog-body .wx-img div.img img {
        width: 100%;
        height: 100%;
        display: block;
    }

    .dialog-body .wx-img div.tip-message .tip3 {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -100px;
        margin-top: -20px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 200px;
        height: 40px;
        font-size: 14px;
        font-weight: 400;
        color: #6a6d82;
    }

    .dialog-body .content .tip1 {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 10px;
    }

    .dialog-body .content .tip2 {
        font-size: 14px;
        font-weight: 400;
        color: #666;
        line-height: 22px;
    }

    .content-item .content-text div {
        font-size: 14px;
        font-weight: 400;
        color: #666;
        line-height: 24px
    }

    .content-item .img-container .wx-img:first-child {
        margin: 0 50px 0 7px
    }

    .content-item .img-container .wx-img img {
        width: 134px;
        height: 133px;
        display: block;
        border-radius: 8px;
        border: 1px solid #bbbdc7;
        padding: 5px;
        box-sizing: border-box
    }

    .content-item .img-container .wx-img div {
        width: 140px;
        margin-top: 10px
    }

    .content-item .img-container .tip3 {
        font-size: 14px;
        font-weight: 400;
        color: #3e404c;
        line-height: 20px;
        padding: 11px 15px 11px 20px;
        background-color: #fff;
        border: 1px solid #dadbe4;
        position: relative;
        border-radius: 5px;
        margin-left: 15px;
        margin-bottom: -17px
    }

    .content-item .img-container .tip3:before {
        content: "";
        position: absolute;
        width: 16px;
        height: 16px;
        left: -8px;
        background-color: #fff;
        border: 1px solid #dadbe4;
        top: 50%;
        transform: translateY(-50%) rotate(45deg)
    }

    .content-item .img-container .tip3:after {
        content: "";
        position: absolute;
        width: 16px;
        height: 30px;
        background-color: #fff;
        top: 50%;
        transform: translateY(-50%);
        left: 0
    }

    .content-item .img-container {
        justify-content: flex-start;
        align-items: flex-end;
    }

    .xinxis label {
        padding: 0;
        text-align: right;
    }

    .progress-one img {
        width: 36px;
        height: 36px;
    }

    .el-dialog__body .title {
        display: block;
    }

    .title {
        display: flex;
        padding-top: 30px;
        align-items: center;
        margin-bottom: 20px;
    }

    .title .devider {
        margin-left: 30px;
        width: 4px;
        height: 16px;
        margin-top: 0;
        background: #1a96ff;
    }

    .title-name {
        height: 22px;
        font-size: 18px;
        font-weight: 500;
        color: #333;
        line-height: 22px;
        margin-left: 6px;
    }

    .salary-title {
        width: 100%;
        text-align: center;
        height: 22px;
        font-size: 16px;
        font-weight: 500;
        color: #2a2d3f;
        line-height: 22px;
        margin: 20px 0;
    }

    .preview_body .company-info-item {
        height: 40px;
        align-items: center;
        display: flex;
        margin-left: 14px;
        margin-right: 14px;
        border-bottom: 1px solid rgba(0, 0, 0, .1);
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .preview-tip {
        font-size: 16px;
        font-weight: 400;
        color: #333;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }

    .preview-set-one {
        min-height: 450px;
    }

    .content-previewsend .company-info-item2 {
        align-items: center;
        display: flex;
        justify-content: left;
    }

    .content-previewsend .company-info-item2 {
        align-items: center;
        display: flex;
    }

    .content-previewsend .company-info-item2 .tip_lable {
        border-radius: 6px;
        margin-left: 6px;
    }

    .content-previewsend .company-info-item2 .tip {
        width: 4px;
        height: 15px;
        background: #1a96ff;
        border-radius: 2px;
    }

    .content-previewsend .company-info-item .tip {
        width: 4px;
        height: 15px;
        background: #1a96ff;
        border-radius: 2px;
    }

    .content-previewsend .company-info-item .tip_lable {
        border-radius: 6px;
        margin-left: 6px;
    }

    .content-previewsend .company-info-item {
        align-items: center;
        display: flex;
        justify-content: left;
    }

    .content-previewsend .company-info-item .tip_lable1 {
        font-size: 14px;
        font-weight: 400;
        color: #1f1f1f;
    }

    .announcement {
        color: #666;
        font-size: 12px;
        margin: 14px;
    }

    .footer {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 30px;
        text-align: center;
    }
    .salary-button.primary {
        color: #fff;
        background-color: #1a96ff;
        border-color: #1a96ff;
        padding: 5px 0;
        width: 266px;
        margin-left: 5px;
        cursor: pointer;
    }

</style>


<div class="panel panel-default panel-intro">

    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        <div class="contents">
                            <div class="title">
                                <div class="devider"></div>
                                <div class="title-name">发送记录</div>
                            </div>
                        </div>
                        <div class="salary-title">{$list.name} - {$years1}{$years2}{$setlog.type}</div>
                        <div class="content-previewsend" id="shows">
                            <div class="phone-preview">
                                <div class="contents-preview">
                                    <div class="preview_head">
                                        <div class="title" id="xintime">{$years2}{$setlog.type}</div>
                                    </div>
                                    <div class="preview_title">
                                        <div class="tip1">实发工资(元)</div>
                                        <div class="tip2" id="shiji">{$list.price}</div>
                                        <div class="tip3">{$list.company}</div>
                                    </div>
                                    <div class="preview_body scroll" id="preview_body">
                                        {if !empty($list.notice)}
                                        <div class="company-info-item1">
                                            <div class="tip"></div>
                                            <div class="tip_lable">公告</div>
                                        </div>
                                        <div class="company-info-item1">
                                            <div style="padding: 0 14px;width: 100%;word-break:break-all"> {$list.notice}</div>
                                        </div>
                                        {/if}
                                        <div class="company-info-item1">
                                            <div class="tip"></div>
                                            <div class="tip_lable">工资明细</div>
                                        </div>
                                        {foreach name="listinfo" item="vo" key="k"}
                                        <div class="company-info-item" style="justify-content: space-between;">
                                            <div class="tip4">{$vo.name}</div>
                                            <div class="tip4">{$vo.content}</div>
                                        </div>
                                        {/foreach}
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="footer">
                            <div class="salary-button primary" onclick="window.history.go(-1)">返回</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
